<!-- 点击搜索栏跳转具体搜索页面 -->
<template>
  <div class="search-container">
    <van-sticky>
      <div class="search-bar">
        <van-icon name="arrow-left" class="back-icon" @click="onClickLeft" />
        <div class="search-box">
          <van-search
            v-model="searchValue"
            placeholder="小白菜谱共有10001道菜任你选择"
            shape="round"
            background="transparent"
            @search="onSearch"
            class="custom-search"
          />
        </div>
      </div>
    </van-sticky>
 
    <div v-if="historySearch && historySearch.length > 0" class="history-section">
      <div class="section-header">
        <span class="section-title">历史搜索</span>
        <van-icon name="delete-o" size="16" color="#969799" @click="clearHistory" />
      </div>
      <div class="history-tags">
        <van-tag
          v-for="(item, index) in historySearch"
          :key="index"
          class="history-tag"
          @click="searchByHistory(item)"
        >
          {{ item }}
        </van-tag>
      </div>
    </div>
    
    <div v-else class="empty-history">
      <p>暂无历史记录</p>
    </div>
  </div>
</template>

<script setup name="Search">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
 
const router = useRouter();
const searchValue = ref('');
const historySearch = ref([]);
 
onMounted(() => {
  const saved = localStorage.getItem('searchHistory');
  historySearch.value = saved ? JSON.parse(saved) : [];
});
 
const onClickLeft = () => router.go(-1);
 
const onSearch = () => {
  if (!searchValue.value.trim()) {
    showToast('请输入搜索内容');
    return;
  }
  
  // 添加到历史记录（去重）
  if (!historySearch.value.includes(searchValue.value)) {
    historySearch.value.unshift(searchValue.value);
    localStorage.setItem('searchHistory', JSON.stringify(historySearch.value));
  }
  
  // 跳转到关键词搜索页面并传递参数
  router.push({
    path: '/keyword_search',
    query: { keyword: searchValue.value }
  });
};
 
const searchByHistory = (keyword) => {
  searchValue.value = keyword;
  onSearch();
};
 
const clearHistory = () => {
  historySearch.value = [];
  localStorage.removeItem('searchHistory');
  showToast('已清空历史记录');
};
</script>

<style lang="less" scoped>
/* 保持原有样式不变 */
.search-container {
  padding: 12px;
  background-color: #fff;
  min-height: 100vh;
}
 
.search-bar {
  display: flex;
  align-items: center;
  padding: 6px 0;
}
 
.back-icon {
  margin-right: 8px;
  color: #969799;
  font-size: 18px;
}
 
.search-box {
  flex: 1;
  background-color: #f7f8fa;
  border-radius: 20px;
  padding: 0 12px;
}
 
.custom-search {
  padding: 0;
  height: 100%;
}
 
.history-section {
  margin-top: 20px;
}
 
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
 
.section-title {
  font-size: 16px;
  font-weight: bold;
}
 
.history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
 
.history-tag {
  padding: 3px 12px;
  background-color: #f0f0f0;
  color: #333;
  font-size: 14px;
  border-radius: 16px;
  white-space: nowrap;
  height: 19px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}
 
.history-tag:active {
  background-color: #e0e0e0;
  transform: scale(0.98);
}
 
.empty-history {
  text-align: center;
  color: #999;
  margin-top: 40px;
}
</style>